<script setup lang="ts">
import { AnimeSummaryType } from '@/type/typedefine.ts'
import DescriptionText from '@/components/animesummarypage/DescriptionText.vue'

defineProps({
  animeSummary: {
    type: Object as () => AnimeSummaryType,
    required: true,
  },
})
</script>

<template>
  <div
    class="background-img"
    :style="{ backgroundImage: `url(${animeSummary.backgroundURL})` }"
  >
    <v-sheet
      class="descriptionSheet"
      :style="{
        background:
          'linear-gradient(to right, rgba(' +
          animeSummary.backgroundColor +
          ', 1) 0px, rgba(' +
          animeSummary.backgroundColor +
          ', 0.7) 600px, rgba(' +
          animeSummary.backgroundColor +
          ', 0.6) 100%)',
      }"
    >
      <div class="container">
        <img
          :src="animeSummary.poster"
          height="550"
          style="border-radius: 10px"
        />
        <DescriptionText v-bind:anime-summary="animeSummary"></DescriptionText>
      </div>
    </v-sheet>
  </div>
</template>

<style scoped>
.background-img {
  max-width: 3000px;
  height: 600px;
  width: 100%;
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 280px;
}
.descriptionSheet {
  display: flex;
  justify-content: left;
  width: 100%;
  height: 100%;
  padding-left: 25px;
  padding-top: 25px;
  background: linear-gradient(
    to right,
    rgba(200, 200, 200, 1) 0px,
    rgba(200, 200, 200, 0.7) 600px,
    rgba(200, 200, 200, 0.6) 100%
  );
}

@media only screen and (min-width: 2060px) {
  .background-img {
    background-size: auto;
  }
}

.container {
  display: flex;
  justify-content: flex-start;
  margin: 0px;
  background-color: transparent;
}
</style>
